import React from 'react';
import { Link } from 'react-router-dom';
import { Button, ButtonGroup, Grid, Typography } from '@material-ui/core';

const HomePage = () => {
  return (
    <Grid container spacing={3} >
      <Grid item xs={12} align="center" className='center' >
        <Typography variant="h3" component="h3" style={{ height: '20vh' }}>
          音悦 · 空间
        </Typography>
      </Grid>
      <Grid item xs={12} align="center" className='center'>
        <ButtonGroup disableElevation variant="contained" color="primary">
          <Button to="/join" component={Link}>
            加入房间
          </Button>
          <Button color="secondary" to="/create" component={Link}>
            创建房间
          </Button>
        </ButtonGroup>
      </Grid>
    </Grid>
  );
};

export default HomePage;
